<template>
  <div class="page-box h100 display-flex czbj fgdgdrtre" v-if="fdgdfte">
    <n-breadcrumb>
      <n-breadcrumb-item href="/#/equipmentManagement">
        <n-icon><md-cash /></n-icon> 设备管理
      </n-breadcrumb-item>
      <n-breadcrumb-item>
        <n-icon><md-cash /></n-icon> 设备详情
      </n-breadcrumb-item>
    </n-breadcrumb>

    <n-grid :x-gap="12" :y-gap="20" :cols="2" class="mt20">
      <n-gi>
        <div class="display-flex">
          <div class="details-item-label">点位名称：</div>
          <div class="flex-1">{{ cz.name }}</div>
        </div>
      </n-gi>
      <n-gi>
        <div class="display-flex">
          <div class="details-item-label">AED机柜编码：</div>
          <div class="flex-1">{{ cz.coding }}</div>
        </div>
      </n-gi>
      <n-gi>
        <div class="display-flex">
          <div class="details-item-label">AED设备序列号：</div>
          <div class="flex-1">{{ cz.serialNumber }}</div>
        </div>
      </n-gi>
      <n-gi>
        <div class="display-flex">
          <div class="details-item-label">AED有效期：</div>
          <div class="flex-1">
            {{ cz.validity }}
          </div>
        </div>
      </n-gi>
      <n-gi>
        <div class="display-flex">
          <div class="details-item-label">现场执行项目：</div>
          <div class="flex-1">{{ cz.FieldExecution }}</div>
        </div>
      </n-gi>
      <n-gi>
        <div class="display-flex">
          <div class="details-item-label">安装人：</div>
          <div class="flex-1">{{ cz.userNickname }}</div>
        </div>
      </n-gi>
      <n-gi>
        <div class="display-flex">
          <div class="details-item-label">安装点位置：</div>
          <div class="flex-1">
            东经{{ cz.longitude }},北纬{{ cz.latitude }}
            <div class="map-box" id="container"></div>
          </div>
        </div>
      </n-gi>
    </n-grid>
    <n-grid :x-gap="12" :y-gap="20" :cols="2" class="mt20">
      <n-gi>
        <div class="display-flex">
          <div class="details-item-label">安心驿站一体机”正面远景图片”：</div>
          <div class="flex-1">
            <n-image class="lmseer" :src="'' + cz.PositiveVision" />
          </div>
        </div>
      </n-gi>
      <n-gi>
        <div class="display-flex">
          <div class="details-item-label">安心驿站一体机”正面近景图片”：</div>
          <div class="flex-1">
            <n-image class="lmseer" :src="'' + cz.Positivecloseshot" />
          </div>
        </div>
      </n-gi>
      <n-gi>
        <div class="display-flex">
          <div class="details-item-label">安心驿站一体机”侧面远景图片”：</div>
          <div class="flex-1">
            <n-image class="lmseer" :src="'' + cz.SideShot" />
          </div>
        </div>
      </n-gi>
      <n-gi>
        <div class="display-flex">
          <div class="details-item-label">安心驿站一体机”侧面近景图片”：</div>
          <div class="flex-1">
            <n-image class="lmseer" :src="'' + cz.SideCloseShot" />
          </div>
        </div>
      </n-gi>
      <n-gi>
        <div class="display-flex">
          <div class="details-item-label">
            单独AED机器设备编码照片（编号在屏幕附近）：
          </div>
          <div class="flex-1">
            <n-image class="lmseer" :src="'' + cz.NearScreen" />
          </div>
        </div>
      </n-gi>
      <n-gi>
        <div class="display-flex">
          <div class="details-item-label">AED电池有效期照片：</div>
          <div class="flex-1">
            <n-image class="lmseer" :src="'' + cz.AEDBatteryValidityPeriod" />
          </div>
        </div>
      </n-gi>
      <n-gi>
        <div class="display-flex">
          <div class="details-item-label">AED有效期照片：</div>
          <div class="flex-1">
            <n-image class="lmseer" :src="'' + cz.AEDExpirationDatePhoto" />
          </div>
        </div>
      </n-gi>
      <n-gi>
        <div class="display-flex">
          <div class="details-item-label">电极片有效期照片：</div>
          <div class="flex-1">
            <n-image class="lmseer" :src="'' + cz.ElectrodeLife" />
          </div>
        </div>
      </n-gi>
    </n-grid>
  </div>
</template>
 <script lang='ts' setup>
import { onMounted, ref } from "vue";
import { NImage } from "naive-ui";
import { qurl, dxget } from "../../../util/index";
const jhbe = qurl();
const cz = ref(null);
const fdgdfte = ref(false);
const init = async () => {
  const { data }: any = await dxget(
    "beRelieved/phone/installationGroup/getSb",
    { id: jhbe.id }
  );
  data.longitudeAndLatitude = data.longitudeAndLatitude.split("-");
  cz.value = data;
  fdgdfte.value = true;
};

onMounted(async () => {
  await init();
  let jhhee = cz.value.longitudeAndLatitude;

  if (jhhee) {
    var map = new window.AMap.Map("container", {
      zoom: 16,
      center: [cz.value.longitude, cz.value.latitude],
      resizeEnable: true,
    });
    // 创建一个 Icon
    var startIcon = new window.AMap.Icon({
      // 图标尺寸
      size: new window.AMap.Size(64, 64),
      // 图标的取图地址
      image:
        "//duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/dxgjAdmin/axydImg/设备设备管理1652595901183.png",
      // 图标所用图片大小
      imageSize: new window.AMap.Size(32, 32),
    });
    const jbnse = jhhee.join("-");
    var startMarker = new window.AMap.Marker({
      position: new window.AMap.LngLat(cz.value.longitude, cz.value.latitude),
      icon: startIcon,
      offset: new window.AMap.Pixel(-13, -30),
    });

    map.add([startMarker]);
  }
});
</script>

 <style scoped>
.details-item-label {
  width: 320px;
  text-align: right;
}
.map-box {
  width: 450px;
  height: 240px;
  margin-top: 10px;
}
.fgdgdrtre {
  overflow: auto;
}
</style>